<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_02</title>
</head>
<body>
    <div id="app">
        <ul>
            <!-- v-for 指令：循环 -->
            <li v-for="item in list">
                <!-- v-if 指令：条件成立才绘制 dom  -->
                <span v-if="!item.del">{{item.title}}</span>
                <span v-else style="text-decoration: line-through">{{item.title}}</span>
                <!-- v-show 指令：始终在 dom 中绘制，通过修改 display 属性控制显示隐藏 -->
                <button v-show="!item.del">删除</button>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',

            <!-- 初始化数据 -->
            data: {
                list: [
                    {
                        title:'课程1',
                        del: true
                    },
                    {
                        title:'课程2',
                        del: false
                    }
                ]
            }
        })
    </script>
</body>
</html>